<template>
  <div class="Login">
    <a-form id="components-form-demo-normal-login" :form="form" class="login-form">
      <a-form-item>
        <h2>智能货架代理商后台管理系统</h2>
      </a-form-item>
      <a-form-item>
        <p class="subtitle">让购物更简单·让生活更便利</p>
      </a-form-item>
      <a-form-item>
        <a-input
          v-decorator="[
          'userName',
          { rules: [{ required: true, message: '请输入账户名!' }] }
        ]"
          placeholder="账户名"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入密码!' }] }
        ]"
          type="password"
          placeholder="密码"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          class="verificationCode"
          v-decorator="[
          'verificationCode',
          { rules: [{ required: true, message: '请输入验证码!' }] }
        ]"
          placeholder="验证码"
        >
          <a-icon slot="prefix" type="safety-certificate" style="color: rgba(0,0,0,.25)"/>
        </a-input>
        <a href="javascript:;" class="codeImg" @click="changeCodeImg()">
          <img :src="codeImg" alt="图片加载失败">
        </a>
      </a-form-item>
      <a-form-item>
        <a-checkbox
          v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          }
        ]"
        >记住密码</a-checkbox>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" class="login-form-button" @click="loginData">登陆</a-button>
      </a-form-item>
    </a-form>
    <div class="bottom">
      <div class="one">
        <span>帮助</span>
        <span>隐私</span>
        <span>条款</span>
      </div>
      <p class="two">
        Copyright
        2019 软件开发部设计出品
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: this.$form.createForm(this),
      codeImg: ""
    };
  },
  methods: {
    // 获取登录验证码图片
    changeCodeImg() {
      this.num = Math.ceil(Math.random() * 10);
      this.codeImg =
        this.baseUrl + `/agentBackend/loginCode?clientId=${this.num}`;
    },
    // 登录 返回登录接口数据
    loginData() {
      var values = this.form.getFieldsValue();
      // if (values.remember == true) {
      //   this.setCookie(values.userName, values.password, 7);
      // }else{
      //   this.clearCookie();
      // }
      this.axios
        .post(this.baseUrl + "/agentBackend/login", {
          clientId: this.num,
          code: values.verificationCode,
          password: this.$md5(values.password),
          username: values.userName
        })
        .then(response => {
          // console.log(response);
          this.logininfo = response.data.data;
          this.loginToken = this.logininfo.loginToken;
          this.nickname = this.logininfo.nickname;
          this.photoImg = this.logininfo.photoImg;
          this.username = this.logininfo.username;
          // this.$Cookies.set("loginToken", this.loginToken, { expires: 7 });
          localStorage.setItem("loginToken", this.loginToken);
          this.$store.commit("loginToken", this.loginToken);
          this.$store.commit("nickname", this.nickname);
          this.$store.commit("photoImg", this.photoImg);
          if (response.data.code !== 0) {
            this.$message.error("账号或密码错误");
          } else {
            this.$router.push({ path: "/home" });
            this.$message.info("登录成功");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var values = this.form.getFieldsValue();
      var c_name = values.userName;
      var c_pwd = values.password;
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    //读取cookie
    getCookie() {
      var values = this.form.getFieldsValue();
      if (document.cookie.length > 0) {
        var arr = document.cookie.split(";"); //这里显示的格式需要切割一下自己可输出看下
        // console.log(arr);
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "userName") {
            values.userName = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "password") {
            values.password = arr2[1];
          }
        }
      }
    },
    //清除cookie
    clearCookie() {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    }
  },
  created() {
    this.changeCodeImg();
  },
  mounted() {
    // this.getCookie();
  }
};
</script>

<style scoped>
.Login {
  width: 100%;
  height: 720px;
  position: relative;
}
.login-form {
  width: 25%;
  height: 550px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ant-btn-primary {
  width: 100%;
  height: 40px;
}
h2 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.5rem;
}
.subtitle {
  text-align: center;
}
.ant-input-affix-wrapper {
  height: 40px;
}
.verificationCode {
  width: 60%;
}
.bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  /* width: 500px; */
  height: 50px;
  transform: translate(-50%, -50%);
  text-align: center;
}
.bottom .one {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bottom p {
  margin-top: 20px;
}
.codeImg {
  margin-left: 8%;
  display: inline-block;
  height: 100%;
  width: 30%;
  text-align: center;
}
.codeImg img {
  width: 100%;
}
</style>